<template>
	<view class="electric-panel" v-if="quantity <= 100 && quantity > 0" :class="bgClass">
		<div class="panel" :style="{transform: `rotate(${rotate}deg)`}">
			<div class="remainder" :style="{width: quantity +'%'}" />
		</div>
		<div v-show="showText" :style="{marginLeft: (parseFloat(rotate)? 0 : '10') + 'px'}" class="text">{{ quantity }}%
		</div>
	</view>
	<view class="charging-status" v-else-if="quantity > 100">
		<div class="charging-text">
			充电中
		</div>
		<div class="charging-animation">
			<div class="bolt-icon">⚡</div>
		</div>
	</view>

</template>
<script>
	/**
	 * 电池电量Icon
	 */
	export default {
		props: {
			state: {
				type: String,
				default: ''
			},
			// 电量值
			quantity: {
				type: Number,
				default: 0
			},
			// 是否显示电量值
			showText: {
				type: Boolean,
				default: true
			},
			// 旋转角度
			rotate: {
				type: String,
				default: '0'
			}
		},
		computed: {
			bgClass() {
				if (this.quantity >= 40) {
					return 'success'
				} else if (this.quantity >= 20) {
					return 'warning'
				}
				//  else if (this.quantity >= 1) {
				//   return 'danger'
				// } 
				else {
					return 'danger'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	$color-success: #34A94D;
	$color-warning: orange;
	$color-danger: #FA3220;

	@mixin panel($color) {
		.panel {
			border-color: $color;

			&::before {
				background: $color;
			}

			.remainder {
				background: $color;
			}
		}

		.text {
			color: $color;
		}
	}

	.electric-panel {
		display: flex;
		justify-content: center;
		align-items: center;

		.panel {
			box-sizing: border-box;
			width: 30px;
			height: 14px;
			position: relative;
			border: 2px solid #ccc;
			padding: 1px;
			border-radius: 3px;

			&::before {
				content: '';
				border-radius: 0 1px 1px 0;
				height: 6px;
				background: #ccc;
				width: 4px;
				position: absolute;
				top: 50%;
				right: -4px;
				transform: translateY(-50%);
			}

			.remainder {
				border-radius: 1px;
				position: relative;
				height: 100%;
				width: 0%;
				left: 0;
				top: 0;
				background: #fff;
			}
		}

		.text {
			text-align: left;
			width: 42px;
		}

		&.success {
			@include panel($color-success);
		}

		&.warning {
			@include panel($color-warning);
		}

		&.danger {
			@include panel($color-danger);
		}
	}

	.charging-status {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		padding: 0rpx 10rpx;
		background-color: #2ecc71;
		/* 绿色表示正在充电 */
		border-radius: 10px;
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);

		.charging-text {
			font-size: 16px;
			font-weight: bold;
		}

		.charging-animation {
			margin-top: 10px;
			.bolt-icon {
				font-size: 24px;
				color: yellow;
				animation: bolt 0.5s infinite;
			}
		}
	}

	@keyframes charge {
		0% {
			background-color: #2ecc71;
			/* 初始绿色 */
		}

		50% {
			background-color: #27ae60;
			/* 变暗一点 */
		}

		100% {
			background-color: #2ecc71;
			/* 恢复到初始绿色 */
		}
	}

	@keyframes bolt {
		0% {
			opacity: 1;
			transform: translateY(0);
		}

		50% {
			opacity: 0.5;
			transform: translateY(-5px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>